<template>
  <div>
    <el-card>
      <el-form :model="form">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="">
              <el-select v-model="form.week" placeholder="排产周期">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="">
              <el-select v-model="form.week" placeholder="排产周别">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <el-input v-model="form.num" placeholder="合同号" />
            </el-form-item>
          </el-col>
          <el-col :span="10" style="text-align: right">
            <el-button type="primary">查询</el-button>
            <el-button type="">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-row
      :gutter="20"
      style="margin-top: 20px"
      type="flex"
      justify="space-between"
    >
      <el-col :span="3">
        <el-card>
          <h5>合同列表</h5>
          <div
            v-for="(item, index) in 10"
            :key="index"
            class="item"
            :class="current == index ? 'current' : ''"
            @click="current = index"
          >
            合同 {{ index + 1 }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="21">
        <el-card>
          <h5>
            <span> 合同号: 1 </span>
            <span> 齐套数: 1000 </span>
          </h5>
          <second-table-list
            :total="total"
            :current="page.page"
            :size="page.pageSize"
            @changePage="changePage"
          >
            <my-table
              slot="table"
              :columns="columns"
              :data="data"
              :show-selection="false"
            >
              <template v-slot:num="{ row }">
                <span v-if="!row.edit">
                  {{ row.num }}
                </span>
                <el-input
                  v-else
                  v-model="row.num"
                  placeholder="请输入"
                />
              </template>
              <template v-slot:materialUnit="{ row }">
                <span v-if="!row.edit">
                  {{ row.materialUnit }}
                </span>
                <el-select v-else v-model="row.materialUnit" placeholder="">
                  <el-option label="" value="" />
                </el-select>
              </template>
              <template v-slot:bom="{ row }">
                <span v-if="!row.edit">
                  {{ row.bom }}
                </span>
                <el-input
                  v-else
                  v-model="row.bom"
                  placeholder="请输入"
                />
              </template>
              <template v-slot:unit="{ row }">
                <span v-if="!row.edit">
                  {{ row.unit }}
                </span>

                <el-select v-else v-model="row.materialUnit" placeholder="">
                  <el-option label="" value="" />
                </el-select>
              </template>
              <template v-slot:action="{ row }">
                <el-button type="text" @click="row.edit = !row.edit">
                  {{ row.edit ? "保存" : "编辑" }}
                </el-button>
                <el-button type="text" class="danger">删除</el-button>
              </template>
            </my-table>
          </second-table-list>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import myTable from '@/components/table/myTable'
import secondTableList from '@/components/table/secondTableList'
export default {
  components: { myTable, secondTableList },
  data() {
    return {
      form: {},
      current: 0,
      total: 0,
      page: {
        page: 1,
        size: 10
      },
      columns: [
        {
          label: '物料名称',
          prop: 'name'
        },
        {
          label: '物料数量',
          prop: 'num',
          slot: 'num'
        },
        {
          label: '物料单位',
          prop: 'materialUnit',
          slot: 'materialUnit'
        },
        {
          label: '单位产品物料bom',
          prop: 'bom',
          slot: 'bom'
        },
        {
          label: '单位',
          prop: 'unit',
          slot: 'unit'
        },
        {
          label: '可供成品数',
          prop: 'num'
        },
        {
          label: '操作',
          props: 'action',
          slot: 'action',
          minwidth: '300'
        }
      ],
      data: [
        {
          num: 100,
          materialUnit: '个',
          bom: 1,
          unit: '个',
          edit: false
        }
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {
    changePage(val) {
      this.page = val
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/element-variables.scss";
.el-select {
  width: 100%;
}
.el-card {
  height: 100%;
  ::v-deep .el-card__body {
    height: 100%;
  }
}
h5 {
  margin: unset;
  span {
    margin-right: 30px;
  }
}
.item {
  padding: 15px;
  cursor: pointer;
}
.current {
  color: $--color-primary;
}
.danger {
  color: $--color-danger;
}
</style>
